<template>
  <div class="component-library">
    <div class="library-header">
      <h3>组件库</h3>
    </div>
    <div class="library-content">
      <div class="component-group">
        <h4>基础组件</h4>
        <div class="component-list">
          <div
            v-for="component in basicComponents"
            :key="component.type"
            :draggable="true"
            @dragstart="handleDragStart($event, component)"
            class="component-item"
          >
            <i :class="component.icon"></i>
            <span>{{ component.name }}</span>
          </div>
        </div>
      </div>
      
      <div class="component-group">
        <h4>布局组件</h4>
        <div class="component-list">
          <div
            v-for="component in layoutComponents"
            :key="component.type"
            :draggable="true"
            @dragstart="handleDragStart($event, component)"
            class="component-item"
          >
            <i :class="component.icon"></i>
            <span>{{ component.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ComponentConfig } from '../types'

const emit = defineEmits<{
  'drag-start': [event: DragEvent, component: ComponentConfig]
}>()

// 基础组件配置
const basicComponents: ComponentConfig[] = [
  {
    type: 'input',
    name: '输入框',
    icon: 'ep-edit',
    defaultProps: {
      label: '输入框',
      field: 'input',
      placeholder: '请输入内容',
      required: false,
      disabled: false,
      readonly: false,
      fontSize: 14,
      color: '#303133',
      backgroundColor: '#ffffff',
      borderStyle: 'none',
      borderColor: '#dcdfe6',
      borderWidth: 1,
      borderRadius: 4,
      padding: 8,
      margin: 0,
      widthType: 'full', // 宽度类型：full(铺满), custom(自定义)
      customWidth: 300, // 自定义宽度
      labelPosition: 'left', // 标签位置：top(顶部), left(左侧)
      minLength: 0,
      maxLength: 0,
      pattern: '',
      validationRule: { required: false },
      onClick: '',
      onChange: '',
      onFocus: '',
      onBlur: ''
    },
    defaultSize: { width: 300, height: 50 }
  },
  {
    type: 'textarea',
    name: '文本域',
    icon: 'ep-document',
    defaultProps: {
      label: '文本域',
      field: 'textarea',
      placeholder: '请输入内容',
      required: false,
      disabled: false,
      readonly: false,
      rows: 4,
      showWordCount: false,
      minLength: 0,
      maxLength: 0,
      pattern: '',
      fontSize: 14,
      color: '#303133',
      backgroundColor: '#ffffff',
      borderStyle: 'none',
      borderColor: '#dcdfe6',
      borderWidth: 1,
      borderRadius: 4,
      padding: 8,
      margin: 0,
      widthType: 'full', // 宽度类型：full(铺满), custom(自定义)
      customWidth: 300, // 自定义宽度
      labelPosition: 'left', // 标签位置：top(顶部), left(左侧)
      validationRule: { required: false },
      onClick: '',
      onChange: '',
      onFocus: '',
      onBlur: ''
    },
    defaultSize: { width: 300, height: 120 }
  },
  {
    type: 'radio',
    name: '单选框',
    icon: 'ep-circle-check',
    defaultProps: {
      label: '单选框',
      field: 'radio',
      placeholder: '',
      required: false,
      disabled: false,
      readonly: false,
      layout: 'vertical',
      dataSourceType: 'static',
      apiUrl: '',
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' }
      ],
      minLength: 0,
      maxLength: 0,
      pattern: '',
      fontSize: 14,
      color: '#303133',
      backgroundColor: '#ffffff',
      borderStyle: 'none',
      borderColor: '#dcdfe6',
      borderWidth: 1,
      borderRadius: 4,
      padding: 8,
      margin: 0,
      widthType: 'full', // 宽度类型：full(铺满), custom(自定义)
      customWidth: 300, // 自定义宽度
      labelPosition: 'left', // 标签位置：top(顶部), left(左侧)
      validationRule: { required: false },
      onClick: '',
      onChange: '',
      onFocus: '',
      onBlur: ''
    },
    defaultSize: { width: 300, height: 80 }
  },
  {
    type: 'checkbox',
    name: '多选框',
    icon: 'ep-select',
    defaultProps: {
      label: '多选框',
      field: 'checkbox',
      placeholder: '',
      required: false,
      disabled: false,
      readonly: false,
      layout: 'vertical',
      dataSourceType: 'static',
      apiUrl: '',
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' }
      ],
      minLength: 0,
      maxLength: 0,
      pattern: '',
      fontSize: 14,
      color: '#303133',
      backgroundColor: '#ffffff',
      borderStyle: 'none',
      borderColor: '#dcdfe6',
      borderWidth: 1,
      borderRadius: 4,
      padding: 8,
      margin: 0,
      widthType: 'full', // 宽度类型：full(铺满), custom(自定义)
      customWidth: 300, // 自定义宽度
      labelPosition: 'left', // 标签位置：top(顶部), left(左侧)
      validationRule: { required: false },
      onClick: '',
      onChange: '',
      onFocus: '',
      onBlur: ''
    },
    defaultSize: { width: 300, height: 80 }
  },
  {
    type: 'select',
    name: '下拉选择',
    icon: 'ep-arrow-down',
    defaultProps: {
      label: '下拉选择',
      field: 'select',
      placeholder: '请选择',
      required: false,
      disabled: false,
      readonly: false,
      layout: 'vertical',
      dataSourceType: 'static',
      apiUrl: '',
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' }
      ],
      minLength: 0,
      maxLength: 0,
      pattern: '',
      fontSize: 14,
      color: '#303133',
      backgroundColor: '#ffffff',
      borderStyle: 'none',
      borderColor: '#dcdfe6',
      borderWidth: 1,
      borderRadius: 4,
      padding: 8,
      margin: 0,
      widthType: 'full', // 宽度类型：full(铺满), custom(自定义)
      customWidth: 300, // 自定义宽度
      labelPosition: 'left', // 标签位置：top(顶部), left(左侧)
      validationRule: { required: false },
      onClick: '',
      onChange: '',
      onFocus: '',
      onBlur: ''
    },
    defaultSize: { width: 300, height: 50 }
  },
  {
    type: 'date',
    name: '日期选择',
    icon: 'ep-calendar',
    defaultProps: {
      label: '日期选择',
      field: 'date',
      placeholder: '请选择日期',
      required: false,
      disabled: false,
      readonly: false,
      layout: 'vertical',
      dataSourceType: 'static',
      apiUrl: '',
      options: [],
      minLength: 0,
      maxLength: 0,
      pattern: '',
      fontSize: 14,
      color: '#303133',
      backgroundColor: '#ffffff',
      borderStyle: 'none',
      borderColor: '#dcdfe6',
      borderWidth: 1,
      borderRadius: 4,
      padding: 8,
      margin: 0,
      widthType: 'full', // 宽度类型：full(铺满), custom(自定义)
      customWidth: 300, // 自定义宽度
      labelPosition: 'left', // 标签位置：top(顶部), left(左侧)
      validationRule: { required: false },
      onClick: '',
      onChange: '',
      onFocus: '',
      onBlur: ''
    },
    defaultSize: { width: 300, height: 50 }
  },
  {
    type: 'number',
    name: '数字输入',
    icon: 'ep-sort',
    defaultProps: {
      label: '数字输入',
      field: 'number',
      placeholder: '请输入数字',
      required: false,
      disabled: false,
      readonly: false,
      layout: 'vertical',
      dataSourceType: 'static',
      apiUrl: '',
      options: [],
      min: 0,
      max: 100,
      step: 1,
      precision: 0,
      minLength: 0,
      maxLength: 0,
      pattern: '',
      fontSize: 14,
      color: '#303133',
      backgroundColor: '#ffffff',
      borderStyle: 'none',
      borderColor: '#dcdfe6',
      borderWidth: 1,
      borderRadius: 4,
      padding: 8,
      margin: 0,
      widthType: 'full', // 宽度类型：full(铺满), custom(自定义)
      customWidth: 300, // 自定义宽度
      labelPosition: 'left', // 标签位置：top(顶部), left(左侧)
      validationRule: { required: false },
      onClick: '',
      onChange: '',
      onFocus: '',
      onBlur: ''
    },
    defaultSize: { width: 300, height: 50 }
  }
]

// 布局组件配置
const layoutComponents: ComponentConfig[] = [
  {
    type: 'grid',
    name: '栅格布局',
    icon: 'ep-grid',
    defaultProps: {
      label: '栅格布局',
      field: 'grid',
      placeholder: '',
      required: false,
      disabled: false,
      readonly: false,
      layout: 'vertical',
      dataSourceType: 'static',
      apiUrl: '',
      options: [],
      minLength: 0,
      maxLength: 0,
      pattern: '',
      fontSize: 14,
      color: '#303133',
      backgroundColor: '#ffffff',
      borderStyle: 'none',
      borderColor: '#dcdfe6',
      borderWidth: 1,
      borderRadius: 4,
      padding: 8,
      margin: 0,
      widthType: 'full', // 宽度类型：full(铺满), custom(自定义)
      customWidth: 300, // 自定义宽度
      labelPosition: 'left', // 标签位置：top(顶部), left(左侧)
      validationRule: { required: false },
      onClick: '',
      onChange: '',
      onFocus: '',
      onBlur: '',
      // 栅格特有属性
      direction: 'horizontal', // 添加布局方向默认值
      gridColumns: 2, // 栅格列数
      gridGap: 16, // 栅格间距
      gridItems: [
        { label: '列 1', id: 'col1' },
        { label: '列 2', id: 'col2' }
      ], // 栅格子项
      showGridBorder: false, // 是否显示栅格边框
      gridBorderColor: '#e4e7ed', // 栅格边框颜色
      gridBorderStyle: 'none' // 栅格边框样式
    },
    defaultSize: { width: 600, height: 200 }
  },
  {
    type: 'divider',
    name: '分割线',
    icon: 'ep-minus',
    defaultProps: {
      label: '分割线',
      field: 'divider',
      placeholder: '',
      required: false,
      disabled: false,
      readonly: false,
      layout: 'vertical',
      dataSourceType: 'static',
      apiUrl: '',
      options: [],
      minLength: 0,
      maxLength: 0,
      pattern: '',
      fontSize: 14,
      color: '#303133',
      backgroundColor: '#ffffff',
      borderStyle: 'none',
      borderColor: '#dcdfe6',
      borderWidth: 1,
      borderRadius: 4,
      padding: 8,
      margin: 0,
      widthType: 'full', // 宽度类型：full(铺满), custom(自定义)
      customWidth: 300, // 自定义宽度
      labelPosition: 'left', // 标签位置：top(顶部), left(左侧)
      validationRule: { required: false },
      onClick: '',
      onChange: '',
      onFocus: '',
      onBlur: ''
    },
    defaultSize: { width: 300, height: 20 }
  },
  {
    type: 'text',
    name: '静态文本',
    icon: 'ep-chat-line-square',
    defaultProps: {
      label: '静态文本',
      field: 'text',
      placeholder: '',
      required: false,
      disabled: false,
      readonly: false,
      layout: 'vertical',
      dataSourceType: 'static',
      apiUrl: '',
      options: [],
      textFontSize: 14,
      textColor: '#303133',
      textFontWeight: 'normal',
      content: '这是一段静态文本',
      minLength: 0,
      maxLength: 0,
      pattern: '',
      fontSize: 14,
      color: '#303133',
      backgroundColor: '#ffffff',
      borderStyle: 'none',
      borderColor: '#dcdfe6',
      borderWidth: 1,
      borderRadius: 4,
      padding: 8,
      margin: 0,
      widthType: 'full', // 宽度类型：full(铺满), custom(自定义)
      customWidth: 300, // 自定义宽度
      labelPosition: 'left', // 标签位置：top(顶部), left(左侧)
      validationRule: { required: false },
      onClick: '',
      onChange: '',
      onFocus: '',
      onBlur: ''
    },
    defaultSize: { width: 300, height: 30 }
  }
]

const handleDragStart = (event: DragEvent, component: ComponentConfig) => {
  emit('drag-start', event, component)
}
</script>

<style scoped lang="scss">
.component-library {
  width: 280px;
  background: white;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  
  .library-header {
    padding: 16px;
    border-bottom: 1px solid #e4e7ed;
    height: 55px;
    
    h3 {
      margin: 0;
      color: #303133;
    }
  }
  
  .library-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    
    .component-group {
      margin-bottom: 24px;
      
      h4 {
        margin: 0 0 12px 0;
        color: #606266;
        font-size: 14px;
      }
      
      .component-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        
        .component-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 12px 8px;
          border: 1px solid #e4e7ed;
          border-radius: 4px;
          cursor: move;
          transition: all 0.3s;
          background: white;
          
          &:hover {
            border-color: #409eff;
            box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
          }
          
          i {
            font-size: 24px;
            color: #409eff;
            margin-bottom: 4px;
          }
          
          span {
            font-size: 12px;
            color: #606266;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>